<form action="" class="form-horizontal">
	
	<div class="form-group operate">
		<div class="col-sm-offset-2 col-sm-8">
			<input type="hidden" name="id" value="{$mallGoods.id}" />
			<button type="button" class="btn btnAdd btn-info">增加属性</button>
			<button type="submit" class="btn btn-primary" data-loading-txt="提交中，请稍后……" data-ajax-url="__CONTROLLER__/setAttributePost">保存更改</button>
		</div>
	</div>
	
</form>

<style type="text/css">
.chara-con input {
	vertical-align: top;
}

.chara-con .chara-label {
	outline: 0;
	font: 12px/1.5 Arial,sans-serif;
	display: inline;
	float: left;
	height: 26px;
	padding: 0 9px;
	margin: 5px 5px 0 0;
	background-color: #fff;
	border: 1px solid #ccc;
	color: #666;
	line-height: 24px;
	white-space: nowrap;
	text-decoration:none;
}

.chara-con .chara-label.cur {
	border-color: #ffe8cd;
	background-color: #fff6eb;
	color: #f2824a;
}

.addfood-box {
	float: left;
	margin: 0 5px 0 0;
	position: relative;
	z-index: 18;
	zoom: 1;
}

.chara-con .addfood-box {
	top: 7px;
}

.chara-con .addfood {
	padding: 0 2px;
	border: 1px solid #e0e0e0;
	width: 90px;
	height: 26px;
	line-height: 26px;
	background: url(http://si1.s1.dpfile.com/s/c/app/review/i/shop/inpu-bg.a699fc101b354e217ce0eb380b9e80a8.png) no-repeat;
	position: relative;
	z-index: 29;
	top: -2px;
}
</style>

<script type="text/javascript">
(function($) {
	
	$.fn.tags = function(cfg) {
		
		var instance = this;
		
		function tags( cfg ) {
			this.init( cfg );
		}

		tags.prototype.init = function( cfg ) {
		  this.cfg = cfg;
		  var _this = this;
		  instance.delegate("a","click",function() {
			  var _this = this;
			  instance.find("a").each(function() {
				  if( $(this).hasClass('cur') && $(this).get(0) == _this) {
					  $(this).attr('contenteditable', true).focus();
				  } else $(this).removeClass("cur");
			  });
			  $(this).addClass("cur").focus();
		  }).delegate("a", "keyup", function( event ) {
			    var keycode = event.which;
			    if (keycode == 46 && 'true' != $(this).attr('contenteditable')) {
			    	for( var o in cfg['data'] ) {
			    		if(cfg['data'][o] == $(this).data('data') ) {
			    			delete cfg['data'][o];
			    			$(this).remove();
			    		}
			    	}
			    }
		  });
		  instance.append("<div class=\"addfood-box\"><input class=\"addfood form-default\" type=\"text\" placeholder=\"自己写\" maxlength=\"20\" name=\"\" onkeydown='if(event.keyCode==13) return false;'></div>");
		  instance.find(".addfood").keyup(function(event) {
			  var words = $(this).val();
			  if(event.keyCode == 13 && words != '') {
			  	_this.addItems(words);
			  	$(this).val('');
			  }
		  });
		  var data = cfg['data']; cfg['data'] = [];
		  for( var o in data ) {
			  this.addItems(data[o]);
		  }
		};

		tags.prototype.addItems = function( tag ) {
			var cfg = this.cfg;
			if ( !tag ) return false;
			for( var o in cfg['data'] ) {
				if( cfg['data'][o] == tag ) {
					return false;
				}
			}
			instance.find(".addfood-box").before(this.cfg['tpl'].replace(new RegExp("{{label}}", 'g'), tag)).prev().blur(function() {
				  $(this).attr('contenteditable', false).removeClass("cur");
		    }).data('data', tag);
			this.cfg['data'].push( tag );
		};
		
		var tool = new tags(cfg);
	};
	
})(jQuery);

(function() {
	
	var tpl = "", attrs = {$attrNames}, attrValues = {$attrJson};
	
	function addAttrHtml( name, values ) {
		$(".operate").before("<div class=\"form-group\">" +
				"<label class=\"col-sm-2 control-label\">"+name+"</label>" +
			    "<div class=\"col-sm-8\" id=\"attr-group\">" +
				    "<div class=\"col-sm-9 chara-con\" style=\"padding: 0px;\">" +
				    "</div>" +
			    "</div>" +
			"</div>").prev().find(".chara-con").tags({
				'tpl' : "<a class=\"chara-label\" href=\"javascript:;\">{{label}}<input type=\"hidden\" name=\"attrs_cfg["+name+"][]\" value=\"{{label}}\"></a>",
				'data' : values
			});
	}
	
	function initAttr() {
		for(var o in attrValues) {
			addAttrHtml(o, attrValues[o]);
		}
	}
	
	$(".btnAdd").click(function() {
		var name = prompt('请输入属性名:');
		if ( name && name != '') {
			for (var o in attrs) {
				if(attrs[o]==name) {
					alert('属性已存在');
					return false;
				}
			}
			attrs.push(name);
			addAttrHtml( name, [] );
		}
	});
	
	initAttr();
	
})();

</script>